<template>
	<div>
    <!--认证失败消息提示-->
    <div class="authentication-warning" v-if="type === 'update' || type === 'change'">
      {{ warningCont }}
    </div>
    <!--上传-->
    <div class="authentication-content">
      <!--联系人1-->
      <v-emergency class="v-contacts-component" @change-params="getContactsInfo1" v-if="type === 'set'" num="1"></v-emergency>
      <v-emergency class="v-contacts-component" @change-params="getContactsInfo1" v-else-if="type === 'change' || type === 'update'" :parentData="contactsInfo1" num="1"></v-emergency>
      <!--联系人2-->
      <v-emergency class="v-contacts-component" @change-params="getContactsInfo2" v-if="type === 'set'" num="2" style="margin-top:60px"></v-emergency>
      <v-emergency class="v-contacts-component" @change-params="getContactsInfo2" v-else-if="type === 'change' || type === 'update'" :parentData="contactsInfo2" num="2" style="margin-top:60px"></v-emergency>
    </div>
    <!--提交按钮-->
    <div class="btn-submit">
      <button type="button" :class="{'btn-forbid-item': !allowSubmitCont}" @click="onSubmit('/personal/edit/success')" :disabled="!allowSubmitCont">{{$t('message.PersonalIdentityAuthenticationSubmitBtn')}}</button>
    </div>
	</div>
</template>

<script>
import VEmergency from '@/components/base/VEmergency'

export default {
  components: {
    VEmergency
  },
  data () {
    return {
      // 后台加载过来验证信息的id
      contactsInfoID1: '',
      contactsInfoID2: '',
      // 紧急联系人验证信息
      contactsInfo1: {},
      contactsInfo2: {},
      // 是否允许提交
      allowSubmitCont: false,
      contValid1: false,
      contValid2: false,
      // 认证失败原因
      warningCont: '',
      // 阻止重复提交
      allowSubmit: true
    }
  },
  computed: {
    // 当前页面编辑类型
    type () {
      return this.$route.params.type || 'undefined'
    }
  },
  methods: {
    // 提交验证
    onSubmit (href) {
      // 阻止重复提交
      if (!this.allowSubmit) {
        return
      }
      this.allowSubmit = false
      // 新提交身份认证set
      if (this.type === 'set') {
        // 获取需要上传的数据
        let contData = {
          name1: this.contactsInfo1.firstName,
          surname1: this.contactsInfo1.lastName,
          age1: this.contactsInfo1.age,
          relation1: this.contactsInfo1.relation,
          tel1: this.contactsInfo1.phoneNum,
          post1: this.contactsInfo1.job,
          name2: this.contactsInfo2.firstName,
          surname2: this.contactsInfo2.lastName,
          age2: this.contactsInfo2.age,
          relation2: this.contactsInfo2.relation,
          tel2: this.contactsInfo2.phoneNum,
          post2: this.contactsInfo2.job
        }
        this.$ajax.addEmergency(contData).then(res => {
          if (res.code === 200) {
            console.log('上传成功')
            this.$router.push(href)
          } else {
            console.log('setStud is wrong')
          }
          this.allowSubmit = true
        }).catch(err => {
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.errorMessage')
          })
        })
      // 更新身份认证信息update || 更换身份认证信息change
      } else {
        var contData = {
          id: this.contactsInfoID1,
          name1: this.contactsInfo1.firstName,
          surname1: this.contactsInfo1.lastName,
          age1: this.contactsInfo1.age,
          relation1: this.contactsInfo1.relation,
          tel1: this.contactsInfo1.phoneNum,
          post1: this.contactsInfo1.job,
          name2: this.contactsInfo2.firstName,
          surname2: this.contactsInfo2.lastName,
          age2: this.contactsInfo2.age,
          relation2: this.contactsInfo2.relation,
          tel2: this.contactsInfo2.phoneNum,
          post2: this.contactsInfo2.job
        }
        this.updateCont(contData, href)
      }
    },
    // 获取修改认证信息change
    getChangeData () {
      this.$ajax.getEmergency().then(res => {
        if (res.code === 201) {
          console.log(res.msg)
        } else if (res.code === 202) {
          let data = res.data
          // contactsInfo1
          this.contactsInfo1 = {
            firstName: data.name1,
            lastName: data.surname1,
            age: data.age1,
            relation: data.relation1,
            phoneNum: data.tel1,
            job: data.post1
          }
          this.contactsInfoID1 = data.id
          // contactsInfo2
          this.contactsInfo2 = {
            firstName: data.name2,
            lastName: data.surname2,
            age: data.age2,
            relation: data.relation2,
            phoneNum: data.tel2,
            job: data.post2
          }
          // this.contactsInfoID2 = data[1].id
          // 审核失败文案
          this.warningCont = this.$t('message.contactsFailedReason') + (!data.msg || data.msg === '' ? this.$t('message.none') : data.msg)
          console.log('Get change data.')
        } else if (res.code === 203) {
          console.log(res.msg)
        } else {
          console.log(res.code, res.msg)
        }
      }).catch(err => {
        this.$store.commit('alert', {
          switch: true,
          alertText: this.$t('message.errorMessage')
        })
      })
    },
    // 从学生信息子组件获取数据
    getContactsInfo1 (data) {
      if (data === 'no') {
        this.contValid1 = false
      } else {
        this.contactsInfo1 = data
        this.contValid1 = true
      }
    },
    getContactsInfo2 (data) {
      if (data === 'no') {
        this.contValid2 = false
      } else {
        this.contactsInfo2 = data
        this.contValid2 = true
      }
    },
    // 请求 set 紧急联系人认证
    setCont (contactsData) {
      this.$ajax.addEmergency(contactsData).then(res => {
        if (res.code === 200) {
          console.log('上传成功')
        } else {
          console.log('setStud is wrong')
        }
        this.allowSubmit = true
      }).catch(err => {
        this.$store.commit('alert', {
          switch: true,
          alertText: this.$t('message.errorMessage')
        })
      })
    },
    // 请求 update 紧急联系人认证的方法
    updateCont (contactsData, href) {
      this.$ajax.editEmergency(contactsData).then((res) => {
        // 请求现在执行完成
        if (res.code === 200) {
          console.log('上传紧急联系人认证信息成功')
          this.$router.push(href)
        } else {
          console.log(res.msg)
        }
        this.allowSubmit = true
      }).catch(err => {
        this.$store.commit('alert', {
          switch: true,
          alertText: this.$t('message.errorMessage')
        })
      })
    }
  },
  watch: {
    // 判定 this.allowSubmitCont 是否为可以为true
    contValid1 (val) {
      if (val && this.contValid2) {
        this.allowSubmitCont = true
      } else {
        this.allowSubmitCont = false
      }
    },
    contValid2 (val) {
      if (val && this.contValid1) {
        this.allowSubmitCont = true
      } else {
        this.allowSubmitCont = false
      }
    }
  },
  mounted () {
    if (this.type === 'change') {
      this.getChangeData()
    } else {
      console.log('set')
    }
    window.scrollTo(0, 0)
  }
}
</script>

<style scoped>
.authentication-warning {
	width: 805px;
	height: 50px;
	margin: 40px auto 0;
	line-height: 50px;
	font-size: 14px;
	border: 1px solid #ff600a;
	padding-left: 55px;
	background: #fffdf4 url(../../../assets/images/icon_errorTips.png) no-repeat 23px center;
}

.authentication-content {
	margin-top: 60px;
}

.v-contacts-component {
  width: 605px;
  margin: 0 auto;
}

.authentication-tip {
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	color: #ff600a;
	margin-top: 12px;
	padding-left: 24px;
	background: url(../../../assets/images/icon_errorTips.png) no-repeat left center;
}

.btn-submit {
	height: 48px;
  margin-top: 80px;
	text-align: center;
}

.btn-submit > button {
	width: 376px;
	height: 48px;
	border: none;
	background-color: #ff600a;
	color: #fff;
	border-radius: 2px;
	cursor: pointer;
}

.btn-forbid-item {
  background-color: #d7d7d7 !important;
  cursor: not-allowed !important;
}
</style>